<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>{{ name }}</title>
  <style>
    body {
      background-color: #F4F4F5;
      font-family: Arial;
      color: #1C1E21;
    }

    .box {
      width: 700px;
      background-color: #fff;
      box-shadow: 0 12px 44px 0 rgba(0,0,0,.06);
      margin: auto;
      margin-top: 100px;
      border-radius: 5px;
    }

    .top-banner {
      height: 5px;
      background-color: #ff5555;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
    }

    .content {
      padding: 30px;
    }

    h2 {
      margin: 0;
      margin-bottom: 20px;
    }

    .section {
      margin-bottom: 30px;
    }

    .filename {
      font-style: italic;
      margin-top: -10px;
      margin-bottom: 30px;
      font-size: 0.95rem;
    }

    .location {
      float: right;
    }

    .message {
      font-size: 1.2em;
    }

    .stack {
      background-color: #F4F4F5;
      padding: 10px;
      border-radius: 5px;
    }

    pre {
      overflow-x: scroll;
      margin: 0;
    }

    .caption {
      margin-top: 20px;
      color: #A9ABAE;
      text-align: justify;
      font-size: 0.9rem;
    }
  </style>
</head>
<body>
   <div class="box">
      <div class="top-banner">    
      </div>
      <div class="content">
        <div class="section">
          <h2>{{ name }}</h2>
          <div class="filename">
            <span>{{ filename }}</span>
            <span class="location">line {{ line }}, column {{ column }}</span>
          </div>
          <pre class="message">{{ message }}</pre>
        </div>
          <h2>Call Stack</h2>
          <div class="stack">
            <pre>{{ stack }}</pre>
          </div>
        <div class="caption">
          You are seeing this error because you have settings.debug set to true in your configuration file.
        </div>
      </div>
   </div>
</body>
</html>